<template>
  <div class="sidebar" :class="{ collapsed: isCollapsed }">
    <!-- 头部 -->
    <div class="sidebar-header">
      <div class="header-content">
        <h1>石景山区定点定位图</h1>
        <p>楼宇工作站地图系统</p>
      </div>
      <el-button
        class="collapse-btn"
        :icon="isCollapsed ? ArrowRight : ArrowLeft"
        circle
        size="small"
        @click="toggleCollapse"
      />
    </div>
    
    <div v-show="!isCollapsed" class="sidebar-content">
      <!-- 地图选择器 -->
      <div class="map-selector">
        <label>📍 选择地图</label>
        <el-select
          v-model="selectedMapKey"
          placeholder="请选择要查看的地图..."
          size="large"
          @change="handleSelect"
        >
          <el-option
            v-for="map in mapList"
            :key="map.key"
            :label="map.地图名称"
            :value="map.key"
          />
        </el-select>
      </div>
      
      <!-- 数据版本切换 -->
      <div class="data-version-switch">
        <el-tooltip 
          :content="dataVersion === 'merged' ? '当前：精简版（已合并相似楼宇，减少31%）' : '当前：完整版（显示所有楼宇）'"
          placement="bottom"
        >
          <el-switch
            :model-value="useMergedData"
            size="default"
            inline-prompt
            active-text="精简"
            inactive-text="完整"
            :active-value="true"
            :inactive-value="false"
            @change="handleDataVersionChange"
          />
        </el-tooltip>
        <div class="version-info">
          <span v-if="dataVersion === 'merged'" class="badge merged">
            精简版 ({{ buildingCount }}个楼宇)
          </span>
          <span v-else class="badge full">
            完整版 ({{ buildingCount }}个楼宇)
          </span>
        </div>
      </div>
      
      <!-- 功能按钮区域 -->
      <div class="map-controls">
        <h3 class="controls-title">🗺️ 地图控制</h3>
        <div class="controls-grid">
          <el-button @click="handleReload" :icon="Refresh" size="default">重新加载</el-button>
          <el-button @click="handleFitView" :icon="Aim" size="default">适应视野</el-button>
          <el-button @click="handleToggle3D" :type="props.is3D ? 'primary' : ''" size="default">
            {{ props.is3D ? '2D' : '3D' }}模式
          </el-button>
          <el-button @click="handleToggleJurisdiction" :icon="MapIcon" size="default">
            {{ props.showJurisdiction ? '隐藏' : '显示' }}管辖范围
          </el-button>
          <el-button @click="handleToggleLabels" :icon="PriceTag" size="default">
            {{ props.showLabels ? '隐藏' : '显示' }}名称
          </el-button>
          <el-button 
            type="primary" 
            @click="handleDownload" 
            :icon="Camera"
            size="default"
          >
            下载地图
          </el-button>
        </div>
        
        <!-- 3D俯仰角控制 -->
        <div v-if="props.is3D" class="rotation-control">
          <div class="rotation-label">
            <span>📐 俯仰角度</span>
            <span class="rotation-value">{{ pitchAngle }}°</span>
          </div>
          <el-slider
            v-model="pitchAngle"
            :min="0"
            :max="83"
            :step="1"
            show-input
            :show-input-controls="false"
            @input="handlePitchChange"
            @change="handlePitchChange"
          />
          <div class="rotation-presets">
            <el-button size="small" @click="setPitchPreset(0)">2D</el-button>
            <el-button size="small" @click="setPitchPreset(30)">30°</el-button>
            <el-button size="small" @click="setPitchPreset(50)">50°</el-button>
            <el-button size="small" @click="setPitchPreset(70)">70°</el-button>
          </div>
        </div>
        
        <!-- 3D旋转角度控制 -->
        <div v-if="props.is3D" class="rotation-control">
          <div class="rotation-label">
            <span>🔄 旋转角度</span>
            <span class="rotation-value">{{ rotationAngle }}°</span>
          </div>
          <el-slider
            v-model="rotationAngle"
            :min="0"
            :max="360"
            :step="1"
            show-input
            :show-input-controls="false"
            @input="handleRotationChange"
            @change="handleRotationChange"
          />
          <div class="rotation-presets">
            <el-button size="small" @click="setRotationPreset(0)">正北</el-button>
            <el-button size="small" @click="setRotationPreset(90)">正东</el-button>
            <el-button size="small" @click="setRotationPreset(180)">正南</el-button>
            <el-button size="small" @click="setRotationPreset(270)">正西</el-button>
          </div>
        </div>
      </div>
      
      <!-- 地图信息 -->
      <div class="map-info">
      <div v-if="!currentMap" class="info-card welcome-card">
        <h3>📍 欢迎使用</h3>
        <div class="welcome-content">
          <p>本系统包含石景山区的11张定点定位图：</p>
          <ul>
            <li>1张区级地图</li>
            <li>10张街道/园区级地图</li>
          </ul>
          
          <div class="tips">
            <h4>💡 使用提示：</h4>
            <ul>
              <li>标签完整显示，智能避免重叠</li>
              <li>方形框表示工作站管辖范围</li>
              <li>地图上自动显示管辖范围列表</li>
              <li><strong>点击列表项用箭头指向工作站</strong></li>
              <li>点击"🏷️ 显示名称"可切换显示</li>
              <li>点击"📷 下载地图"保存图片（含列表）</li>
            </ul>
          </div>
          
          <p class="guide">请在上方选择要查看的地图</p>
        </div>
      </div>
      
      <template v-else>
        <!-- 基本信息 -->
        <div class="info-card">
          <h3>{{ currentMap.地图名称 }}</h3>
          <p class="map-type">类型: {{ currentMap.地图类型 }}</p>
        </div>
        
        <!-- 统计信息 -->
        <div v-if="currentMap.统计" class="info-card stats-card">
          <h3>📊 统计信息</h3>
          <div class="stat-grid">
            <div 
              v-for="(value, key) in currentMap.统计" 
              :key="key"
              class="stat-item"
            >
              <div class="stat-value">{{ value }}</div>
              <div class="stat-label">{{ key }}</div>
            </div>
          </div>
        </div>
        
        <!-- 工作站管辖范围列表 -->
        <div 
          v-for="station in stationsList" 
          :key="station.工作站名称"
          class="info-card station-card"
          :style="{ 
            background: `linear-gradient(135deg, ${station.color}15 0%, ${station.color}05 100%)`,
            borderLeft: `4px solid ${station.color}`
          }"
        >
          <h4 :style="{ color: station.color }">
            <span class="station-type-tag" :style="{ background: station.color }">
              {{ station.typeText }}
            </span>
            <span>{{ station.工作站名称 }}</span>
          </h4>
          <p class="building-count">
            管辖范围 ({{ station.buildings.length }}个楼宇)：
          </p>
          <div class="building-grid">
            <div 
              v-for="(building, index) in station.buildings" 
              :key="index"
              class="building-item"
              :style="{ borderColor: station.color + '40' }"
              :title="building.楼宇名称"
            >
              <span 
                class="building-number"
                :style="{ 
                  background: station.color + '20', 
                  color: station.color 
                }"
              >
                {{ index + 1 }}
              </span>
              <span class="building-name">{{ building.楼宇名称 }}</span>
            </div>
          </div>
        </div>
      </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { 
  Refresh, 
  Aim, 
  Location as MapIcon, 
  PriceTag, 
  Camera,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'

const props = defineProps({
  mapList: {
    type: Array,
    default: () => []
  },
  currentMap: {
    type: Object,
    default: null
  },
  showJurisdiction: {
    type: Boolean,
    default: true
  },
  showLabels: {
    type: Boolean,
    default: true
  },
  is3D: {
    type: Boolean,
    default: true
  },
  rotation: {
    type: Number,
    default: 0
  },
  pitch: {
    type: Number,
    default: 50
  },
  useMergedData: {
    type: Boolean,
    default: true
  },
  dataVersion: {
    type: String,
    default: 'merged'
  },
  buildingCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['select-map', 'reload', 'fit-view', 'toggle-3d', 'toggle-jurisdiction', 'toggle-labels', 'download', 'data-version-change', 'rotation-change', 'pitch-change'])

const selectedMapKey = ref('')
const isCollapsed = ref(false)
const rotationAngle = ref(0)
const pitchAngle = ref(50)

// 切换收起/展开
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 处理功能按钮点击
const handleReload = () => {
  emit('reload')
}

const handleFitView = () => {
  emit('fit-view')
}

const handleToggle3D = () => {
  emit('toggle-3d')
}

const handleToggleJurisdiction = () => {
  emit('toggle-jurisdiction')
}

const handleToggleLabels = () => {
  emit('toggle-labels')
}

const handleDownload = () => {
  emit('download')
}

// 处理数据版本切换
const handleDataVersionChange = (useMerged) => {
  emit('data-version-change', useMerged)
}

// 处理旋转角度变化
const handleRotationChange = (value) => {
  rotationAngle.value = value
  emit('rotation-change', value)
}

// 设置旋转角度预设
const setRotationPreset = (angle) => {
  rotationAngle.value = angle
  emit('rotation-change', angle)
}

// 处理俯仰角度变化
const handlePitchChange = (value) => {
  pitchAngle.value = value
  emit('pitch-change', value)
}

// 设置俯仰角度预设
const setPitchPreset = (angle) => {
  pitchAngle.value = angle
  emit('pitch-change', angle)
}

// 监听外部旋转角度变化
watch(() => props.rotation, (newVal) => {
  rotationAngle.value = newVal
}, { immediate: true })

// 监听外部俯仰角度变化
watch(() => props.pitch, (newVal) => {
  pitchAngle.value = newVal
}, { immediate: true })

// 工作站列表（带颜色信息）- 性能优化版
const stationsList = computed(() => {
  if (!props.currentMap?.数据) return []
  
  const stations = props.currentMap.数据.工作站列表 || props.currentMap.数据.工作站点位 || []
  
  // 过滤和映射一次完成，减少遍历次数
  const result = []
  for (const station of stations) {
    if (station.覆盖楼宇列表 && station.覆盖楼宇列表.length > 0) {
      const isCenter = station.工作站类型 === '中心站'
      result.push({
        工作站名称: station.工作站名称,
        工作站类型: station.工作站类型,
        color: isCenter ? '#667eea' : '#48bb78',
        typeText: isCenter ? '中心站' : '普通站',
        buildings: station.覆盖楼宇列表
      })
    }
  }
  
  return result
})

// 选择地图
const handleSelect = (key) => {
  emit('select-map', key)
}

// 监听当前地图变化
watch(() => props.currentMap, (newVal) => {
  if (newVal) {
    selectedMapKey.value = newVal.key
  }
})
</script>

<style scoped>
.sidebar {
  width: 380px;
  background: white;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: width 0.3s ease;
  position: relative;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 24px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header-content {
  flex: 1;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .header-content {
  opacity: 0;
  pointer-events: none;
}

.collapse-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  z-index: 10;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header h1 {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
}

.sidebar-header p {
  font-size: 13px;
  opacity: 0.95;
}

.map-selector {
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.data-version-switch {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.version-info {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.badge.merged {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.badge.full {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
}

.map-controls {
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.controls-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.controls-grid .el-button {
  width: 100%;
  justify-content: center;
}

/* Element Plus Switch 样式定制 */
:deep(.el-switch) {
  --el-switch-on-color: #667eea;
  --el-switch-off-color: #f5576c;
}

:deep(.el-switch__label) {
  color: white !important;
  font-weight: bold;
}

.rotation-control {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.rotation-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.rotation-value {
  color: #667eea;
  font-weight: bold;
  font-size: 14px;
}

.rotation-presets {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: space-between;
}

.rotation-presets .el-button {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
}

.map-selector label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.map-info {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  min-height: 0;
}

.info-card {
  background: #f9fafb;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.info-card h3 {
  color: #667eea;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
  border: 1px solid #667eea30;
}

.welcome-content p {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
}

.welcome-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 16px;
}

.welcome-content ul li {
  color: #666;
  font-size: 13px;
  line-height: 2;
  padding-left: 20px;
  position: relative;
}

.welcome-content ul li:before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #667eea;
  font-weight: bold;
}

.tips {
  background: white;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
  border: 1px solid #e0e0e0;
}

.tips h4 {
  color: #667eea;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 600;
}

.tips ul li strong {
  color: #ed8936;
}

.guide {
  margin-top: 16px;
  text-align: center;
  color: #667eea;
  font-weight: 600;
}

.map-type {
  color: #666;
  font-size: 12px;
  margin-top: 8px;
}

.stats-card {
  background: linear-gradient(135deg, #667eea08 0%, #667eea03 100%);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.stat-item {
  background: white;
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e0e0e0;
  transition: all 0.3s;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.stat-value {
  font-size: 26px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.station-card {
  border-radius: 8px;
  padding: 12px;
}

.station-card h4 {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.station-type-tag {
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
}

.building-count {
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
}

.building-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.building-item {
  background: white;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: #555;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  transition: all 0.2s;
}

.building-item:hover {
  transform: translateX(3px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.building-number {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.building-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

